import styled from 'styled-components';
import React, { useState, useEffect, CSSProperties } from 'react';

import ChatWithHistoryWrap from '@/components/base/chat/chat-with-history'
import { ProChat } from '@ant-design/pro-chat';

import { useLayoutContext } from '../../api';
import { InstalledApplication, ProjectApplication } from '@/services/local';

export interface ChatPageProps {

    style?: CSSProperties;

    isInstalled: boolean;

    application: ProjectApplication | InstalledApplication;
}

export const ChatPage: React.FC<ChatPageProps> = (props) => {

    const [_peerId, homePath] = useLayoutContext();

    return (
        <Container style={props.style}>
            <ChatWithHistoryWrap installedAppInfo={{
                id: props.application?.identifier,
                app: {
                    id: props.application?.identifier,
                    mode: 'completion',
                    icon_type: null,
                    icon: '',
                    icon_background: '',
                    icon_url: '',
                    name: props.application?.title,
                    description: '',
                    use_icon_as_answer_icon: true
                },
                uninstallable: false,
                is_pinned: false,
            }}></ChatWithHistoryWrap>
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
`;


const EmptyContainer = styled.div`
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
`;
